<script setup lang="ts">
	import { ref, unref, nextTick, computed, provide } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { cartList, cartDel, cartEdit } from '@/package_saleman/api/Order'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	// 路由参数
	// warehouse_type: 1主仓库，2车销仓
	interface RouteParams {
		store_id : string
		warehouse_id : string
		warehouse_type : '1' | '2'
	}
	const routeParams = ref<RouteParams>({
		store_id: '',
		warehouse_id: '',
		warehouse_type: '2'
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
	})

	const useOrderDetail = () => {
		const dataList = ref({})
		const getList = async () => {
			try {
				const params = {
					...routeParams.value,
					type: 1
				}
				const res = await cartList(params)
				dataList.value = res.data;
			} catch (err) {
				showNotify({
					type: 'error',
					message: err.msg
				})
			}
		}
		const showDelModel = ref(false)
		const delParams = ref({
			id: ''
		})
		const changeShowDelModel = (state : boolean, goods ?: any) => {
			if (goods) {
				delParams.value = Object.assign(unref(delParams), {
					id: goods.id
				})
			}
			showDelModel.value = state
		}
		const delAction = async () => {
			try {
				const res = await cartDel(delParams.value)
				showNotify({
					type: 'success',
					message: res.msg
				})
				getList()
			} catch (err) {
				showNotify({
					type: 'error',
					message: err.msg
				})
			} finally {
				showDelModel.value = false
			}
		}

		return {
			dataList,
			getList,
			showDelModel,
			changeShowDelModel,
			delAction
		}
	}
	const { dataList, getList, showDelModel, changeShowDelModel, delAction } = useOrderDetail()
	onShow(() => {
		getList()
	})

	const toPage = (url : string) => {
		route({
			url,
			params: {
				store_id: unref(routeParams).store_id,
				warehouse_id: unref(routeParams).warehouse_id,
				warehouse_type: unref(routeParams).warehouse_type
			}
		})
	}
	const show = ref(false)
	const title = ref('修改')
	const xgData = ref({})
	const changePriceAndQuantity = (item) => {
		xgData.value = item
		show.value = true
	};
	const validatePositive = (item) => {
		// 检查输入是否为有效数字
		if (isNaN(Number(item))) {
			showNotify({
				type: 'error',
				message: '请输入有效的数字金额！'
			});
			return false;
		}
		// 检查金额是否为正数
		if (Number(item) < 0) {
			showNotify({
				type: 'error',
				message: '必须为正数！'
			});
			return false;
		}
	}
	const confirmAction = async () => {
		try {
			const data = {
				id: xgData.value.id,
				num: xgData.value.num,
				true_price: xgData.value.true_price
			}
			const res = await cartEdit(data)
			showNotify({
				type: 'success',
				message: res.msg
			})
			getList()
		} catch (err) {
			showNotify({
				type: 'error',
				message: err.msg
			})
		} finally {
			show.value = false
		}
	}
	const cancelAction = () => {
		show.value = false
	}

	const submit = () => {
		if (dataList.value.pt.goods.length == 0 && dataList.value.send.goods.length == 0) {
			showNotify({
				type: 'error',
				message: '请添加商品'
			})
			return false
		}
		const ids1 = dataList.value.pt.goods.map((item) => {
			return item.id;
		}).join(',');

		const ids2 = dataList.value.send.goods.map((item) => {
			return item.id;
		}).join(',');

		// 将两个字符串再合并成一个
		const combinedIds = ids1 + ',' + ids2
		route({
			url: '/package_saleman/carpinPages/Order/detail',
			params: {
				...unref(routeParams),
				cart_id: combinedIds
			}
		})
	}
</script>
<template>
	<view class="content">
		<up-navbar title="销售" autoBack bgColor="rgba(242, 243, 245, 1)" :fixed="false"></up-navbar>
		<view class="main">
			<view class="goods-box">
				<view class="box-header" v-if="dataList.pt">销售（共{{dataList.pt.cate_num}}种，{{dataList.pt.goods_num}}件）
				</view>
				<view class="line"></view>
				<view class="main-box" v-for="(item, index) in dataList.pt?.goods" :key="index">
					<view class="main-left">
						<up-image :show-loading="true" :src="item.goods.image" width="140rpx"
							height="140rpx"></up-image>
					</view>
					<view class="main-right">
						<view class="right-header">
							<view class="header-name">{{item.goods.name}}{{item.spec.name}}</view>
							<view class="delete-icon">
								<up-icon name="trash" size="48rpx" @click="changeShowDelModel(true, item)"></up-icon>
							</view>
						</view>
						<view class="right-main">
							<view class="right-mod">{{item.goods.code69}}</view>
							<view style="color: rgba(55, 131, 252, 1);" @click="changePriceAndQuantity(item)">
								编辑：￥{{item.true_price}}*{{item.num}}{{item.spec.unit}}</view>
						</view>
						<view class="right-foot">
							<view style="color: rgba(36, 34, 34, 1);">修改前：￥{{item.sale_price}}</view>
							<view style="color: rgba(36, 34, 34, 1);">修改后：￥{{item.true_price}}</view>
							<view style="font-size: 28rpx;color: rgba(245, 99, 81, 1);">￥{{item.total_price}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-box">
				<view class="box-header" v-if="dataList.send">
					赠品（共{{dataList.send.cate_num}}种，{{dataList.send.goods_num}}件）
				</view>
				<view class="line"></view>
				<view class="main-box" v-for="(items, indexs) in dataList.send?.goods" :key="indexs">
					<view class="main-left">
						<up-image :show-loading="true" :src="items.goods.image" width="140rpx"
							height="140rpx"></up-image>
						<view class="gift">赠品</view>
					</view>
					<view class="main-right">
						<view class="right-header">
							<view class="header-name">{{items.goods.name}}{{items.spec.name}}</view>
							<view class="delete-icon">
								<up-icon name="trash" size="48rpx" @click="changeShowDelModel(true, items)"></up-icon>
							</view>
						</view>
						<view class="right-main">
							<view class="right-mod">{{items.goods.code69}}</view>
							<view style="color: rgba(55, 131, 252, 1);" @click="changePriceAndQuantity(items)">
								编辑：￥{{items.true_price}}*{{items.num}}{{items.spec.unit}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-area">
			<view class="box">
				<view class="box-img" style="margin-right: 40rpx;"
					@click="toPage('package_saleman/carpinPages/AddGoods/index')">
					<view class="header-img">
						<image style="width: 60rpx;height: 60rpx;" src="/package_saleman/static/img/billing2.png">
						</image>
					</view>
					<view class="box-name">销/赠</view>
				</view>
			</view>
			<view class="box-line"></view>
			<view class="info">
				<view class="line">
					<text class="label">销售合计：</text>
					<text style="color: #F54E4E;font-size: 28rpx;">￥{{dataList.total_money}}</text>
				</view>
			</view>
			<view class="submit-btn">
				<up-button text="去结算" :disabled="dataList.pt?.goods.length == 0 && dataList.send?.goods.length == 0"
					shape="circle" color="rgba(55, 131, 252, 1)" @click="submit"></up-button>
			</view>
		</view>
		<up-modal :show="show" :title="title" showCancelButton asyncClose @cancel="cancelAction"
			@confirm="confirmAction">
			<view style="display: flex; flex-direction: column;">
				<view style="display: block;">
					数量：<view style="display: inline-block;">
						<up-input v-model="xgData.num" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder=""
							border="none" :suffixIcon="xgData.unit"
							suffixIconStyle="color:rgba(109, 108, 112, 1);font-size: 28rpx;"
							@blur="validatePositive(xgData.num)"></up-input>
					</view>
				</view>
				<view style="display: block;margin-top: 40rpx;" v-if="xgData.goods_type == 1">
					金额：<view style="display: inline-block;">
						<up-input v-model="xgData.true_price" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder=""
							border="none" prefixIcon="￥" prefixIconStyle="font-size: 15px;color: rgba(245, 99, 81, 1)"
							color="rgba(245, 99, 81, 1)" @blur="validatePositive(xgData.true_price)"></up-input>
					</view>
				</view>
			</view>
		</up-modal>
		<up-modal :show="showDelModel" content="确认删除？" asyncClose @confirm="delAction"
			@cancel="changeShowDelModel(false)" showCancelButton></up-modal>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background: rgba(242, 243, 245, 1);

		.main {
			width: 100%;
			height: 76vh;
			overflow-y: scroll;

		}

		.goods-box {
			width: 702rpx;
			// height: 454rpx;
			border-radius: 13rpx;
			background: rgba(255, 255, 255, 1);
			margin: 20rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.box-header {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(2, 14, 36, 1);
			}

			.line {
				width: 654rpx;
				height: 2rpx;
				background: rgba(0, 0, 0, 0.1);
				margin: 20rpx 0rpx;
			}

			.main-box {
				display: flex;
				margin-top: 40rpx;

				.main-left {
					width: 140rpx;
					height: 140rpx;
					margin-right: 20rpx;
					position: relative;

					.gift {
						position: absolute;
						top: 0;
						left: 0;
						width: 60rpx;
						height: 32rpx;
						border-radius: 6rpx 0rpx 0rpx 0rpx;
						background: rgba(55, 131, 252, 1);
						font-size: 22rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						line-height: 32rpx;
					}
				}

				.main-right {
					width: 100%;
					font-size: 24rpx;
					font-weight: 500;

					.right-header {
						display: flex;
						justify-content: space-between;

						.header-name {
							font-size: 28rpx;
							color: rgba(2, 14, 36, 1);
						}

					}

					.right-main {
						display: flex;
						justify-content: space-between;
						margin: 20rpx 0rpx;

						.right-mod {
							color: rgba(106, 107, 107, 1);

						}
					}



					.right-foot {
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}

		.submit-area {
			position: fixed;
			bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 80rpx);
			height: 150rpx;
			background-color: #FFF;
			padding: 0rpx 40rpx 40rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容iOS < 11.2 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容iOS 11.2及以上 */
			box-shadow: 0rpx -4rpx 8rpx 0rpx #efefef;

			.box {
				flex: 1;
				display: flex;
				margin-top: 20rpx;

				.box-img {

					.header-img {
						margin: 0rpx auto;
						width: 60rpx;
						height: 60rpx;
					}

					.box-name {
						text-align: center;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(1, 11, 31, 1);
						margin-top: 10rpx;
					}
				}
			}

			.box-line {
				width: 2rpx;
				height: 82rpx;
				background: rgba(0, 0, 0, 0.1);
				margin-right: 40rpx;
			}


			.info {
				flex: 2;
				display: flex;
				flex-direction: column;

				.line {
					display: flex;
					gap: 12rpx;
					color: #9C9AA1;
				}

				.label {
					font-size: 28rpx;
				}
			}

			.submit-btn {
				flex: 1;
				display: flex;
				gap: 20rpx;
			}
		}
	}
</style>